<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Streaming Receiver</title>
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
<video id="remoteVideo" autoplay></video>
<script>
    const videoElement = document.getElementById('remoteVideo');
    const socket = io('http://127.0.0.1:8081', {
        transports: ['websocket'],
        extraHeaders: {
            'X-Custom-Header': 'CustomValue'
        }
    });

    socket.on('connect', () => {
        console.log('Connected to server');
    });

    socket.on('video', (data) => {
        const blob = new Blob([new Uint8Array(data)], { type: 'video/webm' });
        const url = URL.createObjectURL(blob);
        videoElement.src = url;
        videoElement.play();
    });

    socket.on('disconnect', () => {
        console.log('Disconnected from server');
    });

    socket.on('error', error => {
        console.error('WebSocket error:', error);
    });
</script>
</body>
</html>